<template>
  <div class="rule-toolbar">
    <n-space>
      <n-button type="primary" @click="$emit('create')">
        <template #icon>
          <n-icon :component="AddOutline" />
        </template>
        新建规则
      </n-button>
      
      <n-button @click="$emit('refresh')">
        <template #icon>
          <n-icon :component="RefreshOutline" />
        </template>
        刷新
      </n-button>
      
      <n-input
        :value="searchKeyword"
        @update:value="$emit('update:searchKeyword', $event)"
        placeholder="搜索规则名称..."
        style="width: 300px"
        clearable
      >
        <template #prefix>
          <n-icon :component="SearchOutline" />
        </template>
      </n-input>
    </n-space>
  </div>
</template>

<script setup lang="ts">
import { NButton, NInput, NIcon, NSpace } from 'naive-ui';
import AddOutline from '@vicons/ionicons5/Add';
import RefreshOutline from '@vicons/ionicons5/Refresh';
import SearchOutline from '@vicons/ionicons5/Search';

defineProps<{
  searchKeyword: string;
}>();

defineEmits<{
  create: [];
  refresh: [];
  'update:searchKeyword': [value: string];
}>();
</script>

<style scoped>
.rule-toolbar {
  padding: 16px 0;
}
</style> 